<template>
  <div class="app-container">
    <div class="head" v-loading="boxLoading">
      <p class="title">显示控制</p>
      <el-form :model="queryParams" ref="queryParams" :inline="true" :label-width="labelWidth">
        <el-form-item label="NFR记录是否显示：" prop="">
          <el-switch v-model="configValueNfr" :active-value="'2'" :inactive-value="'1'" :disabled="nfrDisabled"
            @change="donationShowClick"></el-switch>
        </el-form-item>
        <el-form-item label="神椰账户是否显示：" prop="">
          <el-switch v-model="accountValue" :active-value="'2'" :inactive-value="'1'" :disabled="commodityDisabled" @change="accountShowClick"></el-switch>
        </el-form-item>
        <el-form-item label="神椰集市是否显示：" prop="">
          <el-switch v-model="commodityValue" :active-value="'2'" :inactive-value="'1'" :disabled="commodityDisabled" @change="commodityShowClick"></el-switch>
        </el-form-item>
        <el-form-item label="神椰入口是否显示：" prop="">
          <el-switch v-model="entranceValue" :active-value="'2'" :inactive-value="'1'" @change="entranceClick"></el-switch>
        </el-form-item>
        <div class="">
          <div class="title title-box">
            <p class="t-title">声望配置</p>
            <el-button type="primary" size="small" class="t-but" @click="handleAdd">新增</el-button>
          </div>
          <el-table v-loading="loading" :data="tabList"  border>
            <el-table-column label="序号" align="center" type="index" width="64px" />
            <el-table-column label="声望名称" align="center" prop="name" :show-overflow-tooltip="true"> </el-table-column>
            <el-table-column label="声望范围" align="center" prop="value" :show-overflow-tooltip="true" >
              <template slot-scope="scope">
                <div>{{scope.row.rangeStart}} ~ {{scope.row.rangeEnd}}</div>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button size="mini" type="text" @click="handleView(scope.row)">修改</el-button>
                <el-button size="mini" type="text" @click="handleDel(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList"></pagination> -->
          <div>
            <p class="title margin_t20">积分玩法规则上传</p>
            <el-form-item label="" prop="">
              <ImageUploadMore :limit="1" :fileSize="20" @successImg="getOutputValueImg" :value="integralPlayRule">
              </ImageUploadMore>
              <el-button type="text" @click="copyCenterClick">复制链接地址</el-button>
            </el-form-item>
            <p class="title margin_t20">积分规则上传</p>
            <el-form-item label="" prop="">
              <ImageUploadMore :limit="1" :fileSize="20" @successImg="getIntegralImg" :value="integralRule">
              </ImageUploadMore>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <add-dialog
      ref="childRef"
      v-if="reputationConfigStatus"
      :id="id"
      :pathType="pathType"
      :visible.sync="reputationConfigStatus"
      @success="_handleSuccess" 
    /> 
  </div>
</template>

<script>
  import {
    donationShow,
    getOperationConfiguration,
    commodityShow,
    integralRule,
    accountShow,
    entranceShow,
    integralPlayRule,
    reputationV1List,
    delReputationV1
  } from "@/api/integralOperation";
  import addDialog from './components/addDialog'
  export default {
    // dicts: ['equity_card_status', ],
    name: "",
    components: {
      addDialog
    },
    data() {
      return {
        pathType:'add',//声望配置标识
        reputationConfigStatus:false,//声望配置弹窗状态
        labelWidth: '160px',
        boxLoading: false,
        loading: false,
        // 表格数据
        tabList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
        },
        id:'', //修改id
        integralPlayRule: '',//积分玩法规则
        integralRule: '', //积分规则
        configValueNfr: '1', //前端NFR记录按钮是否显示 1不显示 2显示
        nfrDisabled: false,
        commodityValue: '1', //神椰集市记录按钮是否显示 1不显示 2显示
        commodityDisabled: false,
        entranceValue: '1',//	神椰集市是否显示 1不显示 2显示
        accountValue: '1',//神椰账户是否显示 1不显示 2显示
      };
    },
    created() {
      this.getOperationConfiguration()
      this.getList();
    },
    methods: {
   
      /** 获取 积分运营配置 */
      getOperationConfiguration() {
        this.boxLoading = true
        getOperationConfiguration().then(res => {
          this.configValueNfr = res.result.nfrValue
          this.commodityValue = res.result.commodityValue
          this.entranceValue = res.result.entranceValue
          this.accountValue = res.result.accountValue
          this.integralRule = res.result.integralRule
          this.integralPlayRule = res.result.integralPlayRule
          this.boxLoading = false
        }).catch(() => {
          this.boxLoading = false
        })
      },
      /** 操作NFR记录是否显示 */
      donationShowClick() {
        this.nfrDisabled = true;
        let data = {
          configValue: this.configValueNfr
        }
        donationShow(data).then(res => {
          this.$message.success('操作成功')
          this.getOperationConfiguration()
          this.nfrDisabled = false;
        }).catch(() => {
          this.nfrDisabled = false;
        })
      },
      /* 神椰账户 是否显示 设置 */
      accountShowClick(){
        
        this.commodityDisabled = true;
        let data = {
          configValue: this.accountValue
        }
        accountShow(data).then(res => {
          this.$message.success('操作成功')
          this.getOperationConfiguration()
          this.commodityDisabled = false;
        }).catch(() => {
          this.commodityDisabled = false;
        })
      },
      /** 神椰集市记录 是否显示 设置 */
      commodityShowClick() {
        this.commodityDisabled = true;
        let data = {
          configValue: this.commodityValue
        }
        commodityShow(data).then(res => {
          this.$message.success('操作成功')
          this.getOperationConfiguration()
          this.commodityDisabled = false;
        }).catch(() => {
          this.commodityDisabled = false;
        })
      },
      /* 神椰入口 是否显示 设置 */
      entranceClick(){
        this.commodityDisabled = true;
        let data = {
          configValue: this.entranceValue
        }
        entranceShow(data).then(res => {
          this.$message.success('操作成功')
          this.getOperationConfiguration()
          this.commodityDisabled = false;
        }).catch(() => {
          this.commodityDisabled = false;
        })
      },
      getIntegralImg(e) { //积分规则上传
        this.integralRule = e
        let data = {
          configValue: this.integralRule
        }
        integralRule(data).then(res => {
          this.$message.success('操作成功')
          this.getOperationConfiguration()
        }).catch(() => {
          this.integralRule = ''
        })
      },
      getOutputValueImg(e) { //产值规则上传
        this.integralPlayRule = e
        let data = {
          configValue: this.integralPlayRule
        }
        integralPlayRule(data).then(res => {
          this.$message.success('操作成功')
          this.getOperationConfiguration()
        }).catch(() => {
          this.integralPlayRule = ''
        })
      },
      /** 查询列表 */
      getList() {
        this.loading = true;
        reputationV1List().then(response => {
          this.tabList = response.result
          // this.total = response.result.total;
          // console.log(this.total)
          this.loading = false;
        });
      },
      // 新增声望配置
      handleAdd() {
        this.pathType = 'add'
        this.reputationConfigStatus = true
      },
      // 修改声望配置
      handleView(row) {
        this.pathType = 'edit'
        this.id = row.id
        this.reputationConfigStatus = true

      },
      // 删除声望配置
      handleDel(row) {
        var id = row.id
        this.$confirm("是否删除？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          delReputationV1(id).then((res) => {
            this.$message({
              message: "删除成功",
              type: "success",
              duration: 1500,
            });
            setTimeout(() => {
              this.getList();
            }, 800);
          });
        })
        .catch(() => {

        });
      },
      // 声望配置添加成功返回函数
      _handleSuccess(){
         this.getList();
      },
      // 复制链接
      copyCenterClick(){
        var url =`/pages/index/activity-rules/activity-rules?imgUrl=${this.integralPlayRule}&name=玩转神椰`
        this.copyCenter(url)
      },
      // 复制链接
      copyCenter(value) { //复制
        console.log(value)
        if(value==undefined||value==''){
          this.$message.error('复制失败,url地址不存在')
          return
        }
        //创建input标签
        var input = document.createElement('input')
        //将input的值设置为需要复制的内容
        input.value = value;
        //添加input标签
        document.body.appendChild(input)
        //选中input标签
        input.select()
        //执行复制
        document.execCommand('copy')
        //成功提示信息
        this.$message.success('复制成功')
        //移除input标签
        document.body.removeChild(input)
      },
    },


  };

</script>
<style scoped>
  .head {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px 0;
  }

  .title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  .title-box{
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .title-box /deep/ .t-but{
    margin-left: 20px;
  }
  .margin_t20 {
    margin-top: 24px;
  }

  .listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px;
    margin-top: 10px;
  }

  .listBox_head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

</style>
